//商品详情页
<template>
  <div class="">
    <header><nav-bar :title="name" /></header>
    <main>
      <div class="banner-boxa"><img :src="detail.image" alt="" style="width:100%;height:95%;"></div>
      <div class="content-box">
        <div class="titleBox">
          <div class="price-t between-box">
            <span class="price-l">￥{{detail.price}}</span>
            <span class="price-r">
              <van-icon name="star-o" style="padding-right: 0.5rem" />
              <van-icon name="share-o" />
            </span>
          </div>
          <div class="title-text text-overflow">
            {{detail.name}}
          </div>
          <div class="title-info between-box" >
            <span>{{detail.product_class_a.name}}</span>
            <span>销量：800+</span>
          </div>
        </div>
        <div class="hospital-d">
          <div class="hospital-t between-box">
            <div class="hospital-t-l">
              <div class="head-portrait">
                <van-image
                  round
                  width="2.22rem"
                  height="2.22rem"
                  fit="cover"
                  src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
              </div>
            </div>
            <div class="hospital-t-c" >
              <div class="hospital-name">{{detail.yy.name}}</div>
              <div class="hospital-type">{{detail.yy.address}}</div>
            </div>

            <div class="hospital-t-r">
              <van-button plain hairline type="info">电话咨询</van-button>
            </div>
          </div>
          <div class="doctor-name" >
            {{detail.ys.title}}:{{detail.ys.name}}&nbsp;&nbsp;&nbsp;&nbsp;擅长：抗衰、微整、美肤
          </div>
        </div>
        <div class="Product-details">
          <div class="detail-name">商品详情</div>
          <div class="detail-con" v-html="detail.content" ></div>
        </div>
      </div>
    </main>
    <footer class="between-box">
      <div class="purchase" @click="toBuy(id)">立即购买</div>
      <div class="share">分享砍价</div>
    </footer>
  </div>
</template> 

<script>
import navBar from "@/components/navBar";
export default {
  props: {},
  components: {
    navBar,
  },
  data() {
    return {
      name: "商品详情",
      id: "",
      detail: {
        yy:{},
        ys:{},
        product_class_a:{}
      }
    };
  },
  methods: {
    getGoodsDetails() { //商品详情
    this.$api.getGoodsDetails({
      id: this.id
    }).then(res=>{
      if(res.code == 200){
        console.log(res.data);
        res.data.content = res.data.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'");
        this.detail = res.data
      }
    })
  },
  toBuy(id){
    this.$router.push({path:'/details/commodityDetails/Confirmorder',query:{_id:id}})
  }
  },

  created() {
    this.id = this.$route.query._id
    this.getGoodsDetails()
    if(this.detail == ''){
      this.$router.push('')
    }
  },

  mounted() {},

  computed: {},

  watch: {},
};
</script>

<style lang='scss' scoped>
@import "../../style/common.sass";
//只显示几行，剩余省略号
.text-overflow {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
//两端对齐
.between-box {
  display: flex;
  justify-content: space-between;
}
//图片大小
.img-size {
  width: 100%;
  height: 100%;
}
header{
  height: 46px;
}
.banner-boxa {
  height: 15.19rem;
  background-color: $bgc-a;
  margin-bottom: -1rem;
}
.content-box {
  background-color: $bgc-b;
  border-radius: 0.97rem 0.97rem 0rem 0rem;
  .titleBox {
    height: 9.08rem;
    background-color: #fff;
    border-radius: 0.97rem 0.97rem 0rem 0rem;
    padding: $layout-size;
    .price-t {
      padding-top: 1.35rem;
      font-size: 1.19rem;
      .price-l {
        color: $price-c;
      }
    }
    .title-text {
      height: 2.7rem;
      font-size: 0.97rem;
      font-weight: 600;
      color: #333333;
      line-height: 1.35rem;
      margin-top: 0.54rem;
      font-family: PingFangSC-Semibold, PingFang SC;
    }
    .title-info {
      color: $info-c;
      font-size: 0.65rem;
      margin-top: 1.1rem;
    }
  }
  .hospital-d {
    height: 6.22rem;
    background-color: #fff;
    margin-top: 0.65rem;
    padding: $layout-size;
    .hospital-t {
      height: 4rem;
      padding-top: 0.5rem;
      .hospital-t-l {
        .head-portrait {
          height: 4rem;
        }
      }
      .hospital-t-c {
        flex: 1;
        margin-left: 1rem;
        .hospital-name {
          font-size: 0.86rem;
          font-weight: 600;
          color: #333333;
          margin-bottom: 0.3rem;
        }
        .hospital-type {
          font-size: 0.65rem;
          color: #909090;
        }
      }
    }
  }
  .doctor-name {
    font-size: 0.76rem;
    color: #333333;
  }
  .Product-details {
    background-color: #fff;
    padding: $layout-size;
    margin-top: $box-m;
    .detail-name {
      padding-top: 0.86rem;
      font-size: 0.97rem;
      color: #333333;
      font-weight: 600;
      margin-bottom: $box-m;
    }
    .detail-con {
      font-size: $box-m;
      color: #666666;
      width: 375px;
    }
  }
}
footer {
  padding: $layout-size;
  div {
    width: 47%;
    height: 2.38rem;
    border: 0.03rem solid #2fb6a5;
    border-radius: 0.54rem;
    color: #2fb6a5;
    text-align: center;
    line-height: 2.38rem;
    &:hover{
      background-color: #20BCA9;
      color: #fff;
    }
  }
}
</style>